
<script>
/* utils */
import _ from 'lodash';
import * as Utils from '@src/component/form/util';

/* components */
import {
  FormFieldMap,
  SettingComponents,
} from '@src/component/form/components';

export default {
  name: 'client-search-form',
  props: {
    fields: {
      type: Array,
      default: () => [], // 搜索值
    },
    formBackup: {
      type: Object,
      default: () => ({}),
    },
    columnNum: {
      type: Number,
      default: 1, // 一栏二栏
    },
    taskFrom: {
      type: Object | String
    }, // 初始值
  },
  data() {
    return {
      customer: {},
      form: {},
      product: {},
      receipt: {}, // 回执的内容 用户 联系人
    };
  },
  watch: {
    fields() {
      this.buildForm();
    },
  },
  created() {
    this.buildForm();
  },
  methods: {
    create() {
      this.customer = {}
      this.form = {}
      this.product = {}
      this.receipt = {}
    },
    buildForm() {
      if (Object.keys(this.form).length === this.fields.length) return;
      this.initFormVal();
    },

    createUserInput(event, isTags) {
      if (isTags) {
        return (this.form.tags = event);
      }
      const f = event.field;
      this.form[f.fieldName] = event.keyword;
    },

    // 默认值初始化为对象
    initFormVal() {
      let fields = this.fields;
      let form = {};
      let tv = '';
      fields.forEach((field) => {
        tv = '';
        if (field.formType == 'customerAddress' || field.formType == 'address')
          tv = {};
        if (field.formType == 'date' || field.formType == 'datetime') tv = [];
        if (field.formType === 'link') {
          tv = {};
        }
        if (field.fieldName === 'tags') {
          tv = [];
        }
        if (field.formType === 'area' || field.formType === 'cascader') {
          tv = [];
        }

        if (field.formType === 'user') {
          tv = [];
        }

        form[field.fieldName] = this.formBackup[field.fieldName] || tv;
        this.$set(
          this.form,
          field.fieldName,
          this.formBackup[field.fieldName] || tv
        );
      });

      let backUp = this.formBackup.backUp || {};
      this.$set(this, 'customer', backUp.customer || {});
      this.$set(this, 'product', backUp.product || {});
      
      if (this.taskFrom) {
        form = this.taskFrom
        this.form = form
      }

      return form;
    },

    // 操作符
    matchOperator(field) {
      let formType = field.formType;
      let operator = '';

      switch (formType) {
      case 'date': {
        operator = 'between';
        break;
      }
      case 'datetime': {
        operator = 'between';
        break;
      }
      case 'select': {
        if (field.setting && field.setting.isMulti) {
          operator = 'contain';
        } else {
          operator = 'eq';
        }
        break;
      }
      case 'user': {
        operator = 'user';
        break;
      }
      case 'cascader': {
        operator = 'cascader';
        break;
      }
      case 'address': {
        operator = 'address';
        break;
      }
      case 'location': {
        operator = 'location';
        break;
      }
      default: {
        operator = 'like';
        break;
      }
      }
      return operator;
    },

    // render 值渲染
    renderInput(h, field) {
      const f = {
        ...Object.freeze(field)
      };

      let comp = FormFieldMap.get(f.formType);

      if (!comp && f.formType !== 'tags' && f.formType !== 'area' && f.formType !== 'linkman') {
        return null;
      }

      if (f.formType === 'select') {
        f.setting.isMulti = false;
      }

      let childComp = null;

      if (f.formType === 'tags') {
        childComp = h('biz-team-select', {
          props: {
            value: this.form[f.fieldName]
          },
          on: {
            input: event => this.update(event, 'tags')
          }
        });
      } else if (f.formType === 'linkman') {
        childComp = h('linkman-search', {
          props: {
            field: f,
            value: this.form[f.fieldName],
            disableMap: true
          },
          on: {
            update: event => {
              this.update(event);
            },
            input: event => {
              this.form[f.fieldName] = event.keyword;
            }
          }
        });
      } else if (f.formType === 'area') {
        childComp = h(
          'base-dist',
          {
            props: {
              value: this.form[f.fieldName],
              showDefaultCountry: false
            },
            on: {
              input: event => this.update(event, 'dist')
            }
          });
      } else if (f.formType === 'customer') {
        childComp = h('customer-search', {
          props: {
            field: f,
            value: this.form[f.fieldName],
            disableMap: true
          },
          on: {
            update: event => this.update(event)
          }
        });
      } else if (f.formType === 'user') {
        childComp = h('user-search', {
          props: {
            field: f,
            value: this.form[f.fieldName],
            disableMap: true,
          },
          on: {
            update: event => this.update(event),
            input: event => {
              this.form[f.fieldName] = event.keyword;
            }
          }
        });
      } else {
        childComp = h(
          comp.extend && comp.extend[`${f.formType}_search`]
            ? comp.extend[`${f.formType}_search`]
            : comp.build,
          {
            props: {
              field: f,
              value: this.form[f.fieldName],
              disableMap: true,
              placeholder: Utils.genPlaceholder(f)
            },
            on: {
              update: event => this.update(event)
            }
          }
        );
      }

      return h(
        'form-item',
        {
          props: {
            label: f.displayName,
            needValidate: false
          }
        },
        [childComp]
      );
    },

    // return 选中的值
    returnData() {
      let data = {};
      for(let key in this.form) {
        let value = this.form[key]
        if (value && JSON.stringify(value) !== '[]' && JSON.stringify(value) !== '{}') {
          data[key] = value
        }
      }
      return {data, dataView: {...data, ...this.receipt}};
    },

    // 筛选的值
    update(event, action) {
      if (action === 'tags') {
        return (this.form.tags = event);
      }

      if (action === 'dist') {
        return (this.form.area = event);
      }
      
      const f = event.field;

      if (f.formType === 'user' || f.fieldName === 'tlmName') {
        let option = event.options;
        option.forEach(item => {
          if (item.id === event.newValue) {
            this.receipt[f.fieldName] = item.name  
          }
        })
      }

      // this.form[f.fieldName] = event.newValue;
      this.$set(this.form, f.fieldName, event.newValue)
      // console.log(this.form)
    },

  },
  render(h) {
    return (
      <div
        class={`form-item-container ${
          this.columnNum == 2 ? 'two-columns' : ''
        }`}
      >
        {this.fields.map((f) => this.renderInput(h, f))}
      </div>
    );
  },
  components: {
    ...SettingComponents
  },
};
</script>
<style lang="scss" scoped>
    .form-item-container {
        margin-top: 12px;
    }
    .two-columns {
      display: flex;
      flex-wrap: wrap;
      .form-item {
        width: 50%;
      }
    }
</style>